<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>更多通知</title>
    <link rel="stylesheet" href="../layui/css/layui.css" type="text/css">
</head>
<body style="background-color: #009688 !important;">
<div class="layui-layout layui-layout-admin">

    <div class="layui-header layui-bg-gray">

        <div class="layui-logo" style="font-size: 20px; color: #393D49; cursor: pointer" onclick="index()">作业查重系统教师端
        </div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="/teacher/personal" style="color: #393D49">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img"><span th:text="${current.realname}"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/teacher/informs">发布通知</a></dd>
                    <dd><a href="/teacher/update">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a id="logout" href="javascript:;" style="color: #393D49">注销</a></li>
        </ul>
    </div>

    <div>
        <!-- 内容主体区域 -->
        <div style="width: 80%; margin:20px auto 20px auto">
            <div class="layui-row layui-col-space5 layui-bg-gray">
                <div class="layui-col-md12">
                    <div class="layui-row grid-demo">

                        <!-- 数据表格 -->
                        <table class="layui-table" lay-filter="test" id="test"></table>

                        <!-- 隐藏表单，用于编辑动作 -->
                        <form class="layui-form layui-form-pane" action="" id="editIfram" lay-filter="editIfram" style="display: none; margin: 15px">

                            <div class="layui-form-item" id="idBolck">
                                <label class="layui-form-label">ID</label>
                                <div class="layui-input-block">
                                    <input type="text" id="tempId" name="id" disabled class="layui-input layui-disabled" value="">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="tempTitle" name="title" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item" id="dateBlock">
                                <label class="layui-form-label">日期</label>
                                <div class="layui-input-block">
                                    <input type="text" id="tempDate" name="date" autocomplete="off" disabled class="layui-input layui-disabled">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">发布人工号</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="tempPublisher" name="publisher" th:value="${current.username}" disabled class="layui-input layui-disabled">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">提交路径</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="tempPath" name="path" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">路径格式：某某某\实验一\</div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">通知系别</label>
                                <div class="layui-input-inline">
                                    <select name="department" id="departmentSelect" lay-filter="departmentSelect">
                                        <option value="">选择系别</option>
                                        <option value="计算机系">计算机系</option>
                                        <option value="软件系">软件系</option>
                                        <option value="外语系">外语系</option>
                                        <option value="国贸系">国贸系</option>
                                        <option value="市场营销系">市场营销系</option>
                                        <option value="电子系">电子系</option>
                                        <option value="数码媒体系">数码媒体系</option>
                                        <option value="游戏系">游戏系</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item" pane="">
                                <label class="layui-form-label">通知类型</label>
                                <div class="layui-input-inline">
                                    <input type="radio" name="type" lay-filter="typeRadio" value="1" title="必修" checked="">
                                    <input type="radio" name="type" lay-filter="typeRadio" value="0" title="选修">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">通知内容</label>
                                <div class="layui-input-block">
                                    <textarea id="tempContent" rows="10" placeholder="请输入内容" name="content" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <!-- 隐藏提交按钮 -->
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="submit" lay-submit="" lay-filter="submitbtn" id="submitbtn" style="display: none">提交</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="position: relative;text-align: center;background-color: #eeeeee">
        <!-- 底部固定区域 -->
        © 2019-2020 alushu.xyz 版权所有 ICP证：<a href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备20009324号</a>
    </div>

    <input id="currentDepartment" style="display: none" th:value="${current.department}"/>
</div>

<!-- 模板 -->
<script type="text/html" id="typeTpl" th:inline="none">
    {{#  if(d.type === 1){ }}
    <label name="type" class="layui-form-label" style="text-align: left; padding-left: 0">必修</label>
    {{#  } else { }}
    <label name="type" class="layui-form-label" style="text-align: left; padding-left: 0">选修</label>
    {{#  } }}
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm " lay-event="pushInform"><i class="layui-icon layui-icon-file"></i>发布</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delInform"><i class="layui-icon layui-icon-delete"></i>删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
<!--    <a class="layui-btn layui-btn-xs" lay-event="lookInform">查看</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="editInform">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delInform">删除</a>
</script>

<!-- 方法 -->
<script src="../webjars/jquery/3.4.1/jquery.js"></script>
<script src="../layui/layui.js" type="text/javascript"></script>
<script th:inline="none">

    var currentDepartment = $("#currentDepartment").val();
    //根据用户系别修改默认的下拉选项
    $("#departmentSelect option:contains(" + currentDepartment + ")").attr('selected', true);
    $('#departmentSelect').attr('disabled', true);

    function fillForm(data){
        if(data == null){
            $("#idBolck").css('display','none');
            $("#dateBlock").css('display','none');
            $("#tempTitle").val('');
            $("#tempContent").val('');
            $("#tempType").val('');
            $("#tempPath").val('');
        }else {
            $("#idBolck").css('display','block');
            $("#dateBlock").css('display','block');
            $("#tempId").val(data.id);
            $("#tempPublisher").val(data.publisher);
            $("#tempTitle").val(data.title);
            $("#tempContent").val(data.content);
            $("#tempType").val(data.type);
            $("#tempDate").val(data.date);
            $("#tempPath").val(data.path);
        }
    }

    function index() {
        window.location = "/teacher/index"
    }

    $('#logout').click(function () {
        layer.confirm('确定退出系统吗',function () {
            window.location="/logout";
        })
    });

    layui.use(['form','table','element'], function () {
        var table = layui.table
            , upload = layui.upload
            , layer = layui.layer
            , element = layui.element
            , form = layui.form
            , laytpl = layui.laytpl;

        table.render({
            elem: '#test'
            ,height: 'full-100'
            ,url:'/teacher/recentInforms'
            ,limit:15
            ,page: {
                layout: ['prev', 'page', 'next', 'skip','count']
                ,groups: 5
            }
            ,initSort:{field: 'date',type: 'desc'}
            ,toolbar: '#toolbarDemo'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'publisher', title:'发布人', width:80, style:'cursor: pointer;'}
                , {field: 'title', title:'标题', width:80, style:'cursor: pointer;'}
                , {field: 'department', title:'系别', width:80, style:'cursor: pointer;'}
                , {field: 'content', title:'内容', width :300, style:'cursor: pointer;'}
                , {field: 'type', title:'类型', width:60 , templet: '#typeTpl'}
                , {field: 'date', title:'日期'}
                , {field: 'path', title:'通知路径', width :370, style:'cursor: pointer;'}
                , {fixed: 'right', title:'操作', toolbar: '#barDemo', width:170}
            ]]
        });

        //监听单选
        form.on('radio(typeRadio)', function(data){
            if (data.value === '0'){
                $("#departmentSelect option:contains(" + currentDepartment + ")").attr('selected', false);
                $('#departmentSelect').attr('disabled', false);

            }else {
                $("#departmentSelect option:contains(" + currentDepartment + ")").attr('selected', true);
                $('#departmentSelect').attr('disabled', true);
            }
            form.render("select");
        });

        //头部工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'pushInform':
                    fillForm(null);
                    form.render();
                    layer.open({
                        type: 1,
                        title: '编辑通知信息',
                        shade: 0.4,
                        content: $("#editIfram"),
                        resize:false,
                        offset: ['50px', '200px'],
                        area: ['70%', '90%'],
                        btn: ['提交', '取消'],
                        maxmin: true, //开启最大化最小化按钮
                        scrollbar: true,//屏蔽浏览器滚动条
                        yes: function (index, layero) {
                            //监听submit按钮提交
                            form.on('submit(submitbtn)', function (data) {
                                //确认表单信息
                                layer.alert(JSON.stringify(data.field), {
                                    title: '最终的提交信息'
                                },function () {
                                    //表单提交
                                    $.ajax({
                                        url:'/teacher/push',
                                        data:data.field,
                                        type:'post',
                                        success:function (result) {
                                            layer.alert("成功"+result,function () {
                                                layer.closeAll();
                                            })
                                        }
                                    })
                                });
                                return false;
                            });
                            //防止表单验证失效
                            $("#submitbtn").trigger('click');
                        },
                        end: function () {
                            $("#editIfram").css("display", "none");
                        }
                    });
                    break;
                case 'delInform':
                    var data = checkStatus.data
                        ,idParam = [];
                    for (var i = 0; i < data.length; i++) {
                        idParam[i] = data[i].id;
                    }
                    layer.confirm('确认删除？', function(index){
                        $.ajax({
                            url:'/teacher/delInform',
                            data:{
                                "idParam":idParam
                            },
                            method: 'POST',
                            success:function (result) {
                                layer.close(index);
                                table.reload('test',{
                                    page: {
                                        curr: 1
                                    }
                                })
                            }
                        });
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
        });


        //监听行工具事件、表格点击事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'lookInform'){
                layer.alert(JSON.stringify(data));
            } else if(obj.event === 'editInform'){
                fillForm(data);
                //因为是动态插入表单，官方解释说要重新渲染
                form.render();
                layer.open({
                    type: 1,
                    title: '编辑通知信息',
                    shade: 0.4,
                    content: $("#editIfram"),
                    resize:false,
                    offset: ['50px', '200px'],
                    area: ['50%', '70%'],
                    btn: ['提交', '取消'],
                    maxmin: true, //开启最大化最小化按钮
                    scrollbar: true,//屏蔽浏览器滚动条
                    yes: function (index, layero) {
                        //监听submit按钮提交
                        form.on('submit(submitbtn)', function (formDara) {
                            //确认表单信息
                            layer.alert(JSON.stringify(formDara.field), {
                                title: '最终的提交信息'
                            },function () {
                                //表单提交
                                $.ajax({
                                    url:'/teacher/editInform',
                                    data:formDara.field,
                                    type:'post',
                                    success:function (result) {
                                        layer.alert("成功"+result,function () {
                                            layer.closeAll();
                                        })
                                    }
                                })
                            });
                            return false;
                        });
                        //防止表单验证失效
                        $("#submitbtn").trigger('click');
                    },
                    end: function () {
                        $("#editIfram").css("display", "none");
                    }
                });
            } else if(obj.event === 'delInform'){
                var idParam = [];
                idParam[0] = data.id;
                layer.confirm('确认删除？', function(index){
                    $.ajax({
                        url:'/teacher/delInform',
                        data:{
                            "idParam":idParam
                        },
                        method: 'POST',
                        success:function (result) {
                            layer.close(index);
                            table.reload('test',{
                                page: {
                                    curr: 1
                                }
                            })
                        }
                    });
                });
            }
        });

    });
</script>
</body>
</html>